<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >健康管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/healthy/tiwen' }">体温管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row class="margintop20">
            <el-col>
                <a id="dlink"  style="display:none;"></a>
                <el-button type="success" @click="showDialog">体温检测登记</el-button>
                
                <el-button type="danger" @click="exportExcel('mytable','09-14','tiwen.xls')">数据导出</el-button>
            </el-col>

            <el-col>
                <el-table
                    :data="data.tiwenList"
                     style="width: 100%"
                     class="tableinfo margintop20"
                     :header-cell-style="{'text-align':'center'}"
                     :cell-style="{'text-align':'center'}"
                     id="mytable"
                     :row-class-name="tableRowClassName"
                >
                    <el-table-column label="#" type="index"></el-table-column>
                    <el-table-column label="登记时间" prop="time">
                        <template slot-scope="scope">
                            {{scope.row.time | timeFormat('YYYY-MM-DD HH:mm:ss')}}
                        </template>
                    </el-table-column>
                    <el-table-column label="登记体温 (℃)" prop="tiwen">
                        <template slot-scope="scope">
                            {{scope.row.tiwen}}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" >
                        <template slot-scope="scope">

                            <el-tag effect="plain" type="danger" v-if="scope.row.tiwen>37.3">发烧</el-tag>
                            <el-tag effect="plain" type="success" v-else >正常</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="是否检测" >
                        <template slot-scope="scope">
                            <el-switch  
                                v-if="scope.row.tiwen>37.3"
                                v-model="scope.row.ishei"
                                active-text="是"
                                inactive-text="否"
                                active-color="#67C23A"
                                inactive-color="#F56C6C"
                                active-value="1"
                                inactive-value="0"
                                @change="changeIsHei(scope.row)"
                            >
                                
                            </el-switch>
                        </template>
                    </el-table-column>
                     <el-table-column label="核酸结果" >
                        <template slot-scope="scope">
                            <el-switch  
                                v-model="scope.row.is_yin"
                                active-text="阴性"
                                inactive-text="阳性"
                                active-color="#67C23A"
                                inactive-color="#F56C6C"
                                active-value="1"
                                inactive-value="0"
                                @change="changeIsYin(scope.row)"
                            >
                                
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button  @click="showUpdate(scope.row)" type="info" icon="el-icon-edit" circle></el-button>
                            <el-popconfirm
                                confirmButtonText='好的'
                                cancelButtonText='不用了'
                                icon="el-icon-info"
                                iconColor="red"
                                title="你确定要删除吗?"
                                @onConfirm="delOneList(scope.row)"
                                >
                                 <el-button slot="reference" type="danger" icon="el-icon-delete" circle></el-button>
                                </el-popconfirm>
                            
                        </template>
                    </el-table-column>

                </el-table>
            </el-col>
        </el-row>


        <el-dialog
            title="添加体温记录"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form 
                :model="form" 
                :rules="rules"
                ref="myform" 
                label-width="100px"
                label-position="right" 
                class="myform">
                <el-form-item label="当前体温" prop="tiwen">
                    <el-input v-model="form.tiwen"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addTiwenAction" >确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="修改体温记录"
            :visible.sync="updateVisible"
            width="30%"
            :before-close="updateClose">
            <el-form 
                :model="update" 
                :rules="rules"
                ref="updateform" 
                label-width="100px"
                label-position="right" 
                class="myform">
                <el-form-item label="当前体温" prop="tiwen">
                    <el-input v-model="update.tiwen"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateTiwenAction" >修改</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {addtiwen,getmytiwenlist,delOneList,updatetiwenone,updateishei,updateisyin} from "@/api"
import Vue from "vue"
import {mapState,mapMutations} from "vuex"
export default {
    data(){
        return {
            dialogVisible:false,
            updateVisible:false,
            form:{},
            update:{},
            tiwenList:[],
            rules:{
                tiwen:[
                    {required:true,message:"请输入体温记录",trigger:"blur"},
                    {
                        validator:(rule,value,callback)=>{
                            var reg = /((^3[5-9])(\.\d+)?|^(40)(\.0+)?)$/;
                            if(reg.test(value)){
                                callback();
                            }else{
                                callback(new Error('请输入合法体温数值'));
                            }
                        },
                        trigger:"blur"
                    }
                ]
            }
        }
    },
    computed:{
        ...mapState(['data'])
    },
    methods:{
        exportExcel(table, name, filename){   // a download 下载 导出 excle  
            var uri = 'data:application/vnd.ms-excel;base64,',
            template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
            base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
            format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };

            if (!table.nodeType) table = document.getElementById(table)
            var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }

            document.getElementById("dlink").href = uri + base64(format(template, ctx));
            document.getElementById("dlink").download = filename;
            document.getElementById("dlink").click();
        },
        ...mapMutations(['changeTiwenList']),
        changeIsYin(row){
            updateisyin({
                _id:row._id,
                is_yin:row.is_yin
            }).then(res=>{
                if(res.type){
                    
                }
            })
        },
        changeIsHei(row){
            console.log(row);
            updateishei({
                _id:row._id,
                ishei:row.ishei,
            }).then(res=>{
                if(res.type){
                    
                }
            })
        },
        updateTiwenAction(){
            this.$refs.updateform.validate(valid=>{
                if(valid){
                   updatetiwenone({
                       ...this.update
                   }).then(res=>{
                       if(res.type){
                            this.updateVisible=false;
                            // this.tiwenList.forEach((item,idx)=>{
                            //     if(item._id==this.update._id){
                            //         Vue.set(this.tiwenList,idx,this.update)
                            //     }
                            // })
                            var tiwenList = this.data.tiwenList.map((item,idx)=>{
                                if(item._id==this.update._id){
                                    item = {...item,...this.update}
                                }
                                return item;
                            })
                            this.changeTiwenList(tiwenList);
                       }
                   }).catch(err=>{

                   })
                }else{
                    this.$message.error("请完善信息再提交")
                    return false;
                }
            })
        },
        showUpdate(row){
            this.updateVisible=true;
            this.update = {
                ...row
            }
        },
        delOneList(row){
            delOneList({
                _id:row._id
            })
            .then(res=>{
                if(res.type){
                    // this.tiwenList = this.tiwenList.filter(item=>item._id!==row._id)
                    var tiwenList = this.data.tiwenList.filter(item=>item._id!==row._id)
                    this.changeTiwenList(tiwenList);
                }
            })
            .catch(err=>{

            })
        },
        tableRowClassName({row, rowIndex}){
            if (row.tiwen > 37.3) {
                return 'warning-row';
            } 
            return '';
        },
        addTiwenAction(){
            this.$refs.myform.validate(valid=>{
                if(valid){
                    addtiwen({
                        tiwen:this.form.tiwen,
                    })
                    .then(res=>{
                        if(res.type){
                            this.dialogVisible = false;
                            // this.tiwenList = res.result;
                            this.changeTiwenList(res.result);
                            this.form = {}
                        }
                    })
                    .catch(err=>{

                    })
                }else{
                    this.$message.error("请完善信息再提交")
                    return false;
                }
            })
        },
        updateClose(){
            this.updateVisible = false;
        },
        handleClose(){
            this.dialogVisible = false;
        },
        showDialog(){
            this.dialogVisible = true;
        },
        getlist(params){
            getmytiwenlist(params)
            .then(res=>{
                if(res.type){
                    // this.tiwenList = res.result;
                    this.changeTiwenList(res.result);
                }
            })
            .catch(err=>{

            })
        }
    },
    mounted(){
        if(!this.data.tiwenList){
            this.getlist()
        }
    }
}
</script>


<style lang="scss" >
.el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>